<template>
  <div class="goods-setting views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">限时抢券</div>
      <div class="wlm-form-content">
        <!-- :model="coupon"  -->
        <el-form
          ref="platformdata"
          :model="data"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
        >
          <!-- <el-form-item label="分享后赠送优惠券" prop="product">
            <el-radio-group v-model="data.is_show">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="2">不显示</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="抢卷活动时间段持续时间（分钟）" prop="product">
            <!-- v-model="data.product" v-model="data.coupon_duration" -->
            <el-input-number v-model="data.coupon_duration" :controls="false" :min="1" :max="60" style="margin-left:40px;"></el-input-number>
          </el-form-item>
          <el-form-item label="添加时间段" prop="product">
            <!-- <el-time-select
              v-model="data.limit_time"
              :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '23:50',
                            minTime: data.limit_time?data.limit_time:''
                        }"
              placeholder="选择时间"
              @change="limit_timebtn"
            ></el-time-select> -->
             <el-button type="primary" plain  @click="limit_timebtn">添加时间段</el-button>

            <div class="form-help">时间只能往后选择，需要选择前面的时间需要全部删除</div>
            <div class="form-help">前端时间段展示顺序按照后台先后顺序排序</div>
          </el-form-item>
          <el-form-item>
            <div v-for="(item,index) in data.coupon" :key="index" style="margin:20px 0 10px 0 ;">
              <!-- <el-button style="position: relative;">
                <i
                  class="el-icon-error"
                  style="dispale:flex;position: absolute;top:0px;left:64px;"
                  @click="delbtn(index)"
                ></i>
                {{item.limit_time?item.limit_time:'00:00'}}整
              </el-button> -->
              <el-time-select
              :clearable = "false"
              v-model="item.limit_time"
              :picker-options="{
                            start: '00:00',
                            step: '00:10',
                            end: '23:50',
                        }"
              placeholder="选择时间"
              @change="placeholderbtn"
            ></el-time-select>
              <el-button @click="couponToogle(index)">添加优惠券</el-button>
              <!-- @click="delMeal(index)" -->
              <el-button style="margin-left:10px;" icon="el-icon-delete" circle plain @click="delbtn(index)"></el-button>
              <div class="form-help">每一个时间段最多添加5张优惠券</div><br/>
              <el-table class="coupon-table" v-if="item.coupon_id!=''" :data="item.coupon_id">
                <el-table-column prop="date" label="优惠券名称">
                  <template slot-scope="scope">
                    <p>{{scope.row.name}}</p>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="消费门槛">
                  <template slot-scope="scope">
                    <div v-if="scope.row.coupon_type==10">
                      <div v-if="scope.row.rule==0">
                        满{{scope.row.rule_min_money}}
                        减免{{scope.row.reduce_price}}
                      </div>
                      <div v-else>减免{{scope.row.reduce_price}}</div>
                    </div>
                    <div v-if="scope.row.coupon_type==20">
                      <div v-if="scope.row.rule==0">
                        满{{scope.row.rule_min_money}}
                        打{{scope.row.discount}}折
                      </div>
                      <div v-else>打{{scope.row.discount}}折</div>
                    </div>
                    <div v-if="scope.row.coupon_type==30">
                      <div v-if="scope.row.rule==0">
                        满{{scope.row.rule_min_money}}
                        减免{{scope.row.reduce_price}}
                      </div>
                      <div v-else>减免{{scope.row.reduce_price}}</div>
                    </div>
                    <div v-if="scope.row.coupon_type==40">
                      <div v-if="scope.row.rule==0">
                        满{{scope.row.rule_min_money}}
                        范围内随机{{scope.row.min}}-{{scope.row.max}}元
                      </div>
                      <div v-else>范围内随机{{scope.row.min}}-{{scope.row.max}}元</div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="优惠券类型">
                  <template slot-scope="scope">
                    <p v-if="scope.row.coupon_type==10">满减券</p>
                    <p v-if="scope.row.coupon_type==20">折扣券</p>
                    <p v-if="scope.row.coupon_type==30">运费券</p>
                    <p v-if="scope.row.coupon_type==40">随机券</p>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div class="operation-group">
                      <el-button class="wlm-text" type="text" @click="delItemList(index,scope.$index)">删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form-item>
          <choose-coupon
            ref="chooseCoupon"
            :config="chooseCouponConfig"
            :changeEvt="filtersCouponChange"
          ></choose-coupon>
        </el-form>
      </div>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
      <!-- <router-link tag="span" to="/create-shops/storeType">
      <el-button size="small">返回</el-button>
      </router-link>-->
    </div>
  </div>
</template>
<script>
import ChooseCoupon from "@/components/ChooseCoupon/index";
import { getLimitCoupon, limitCoupon } from "@/api/resource";
import { isArray } from "util";
export default {
  name: "scrambletime",
  components: {
    ChooseCoupon,
  },
  data() {
    return {
      index: 0,
      type: 1,
      data: {
        // is_show: 2, //默认不显示
        coupon_duration: 1, //持续时间默认1分钟
        coupon: [], //优惠券数据,
        type:"",
        limit_time:[],
      },
      chooseCouponConfig: {
        type: ["chooseCoupon"],
        model: "display",
        get_limit_type: 0,
        choose_num: 5,
        disabled: [{
          label: 'status',
          value: 1,
          reverse: true
        },
        {
          label: 'get_limit_type',
          value: 1
        }, {
          label: 'coupon_type',
          value: 40
        }],
        initList: [],
      },
    };
  },
  created() {
    //请求数据接口
    this.getLimitCoupon();
  },
  methods: {
    placeholderbtn(val){
      console.log("++++++++++++++++++++++",val)
    },
    // delMeal(index,id){
    //   console.log("dddddddddddddssssssssssssssssssssssssss",index,this.data.coupon[index])
    //   this.data.coupon[index] =[]
    //   // console.log("dddddddddddddssssssssssssssssssssssssss", )
    //   // id = ''
    //   //  this.data.coupon[index] = []
    //   // this.data.splice(index,1)
    // },
    /**
     * 获取数据
     */
    getLimitCoupon() {
      getLimitCoupon({}).then((res) => {
        if (res.data.code == 1) {
          //接口请求成功，获取数据
          this.data = res.data.data;
          console.log("111111111111111111111111111111", this.data);
        } else {
          this.$message.error("网络错误~");
        }
      });
    },
    /**
     * 提交数据
     */
    formFormatSubmit() {
      const data = {
          // 'is_show':'',
          'coupon_duration':'',
          'limit_coupon_id':'',
          'coupon':[],
      };
      const form_data = this.data;
      // data.is_show = form_data.is_show;
      data.coupon_duration = form_data.coupon_duration;
      data.limit_coupon_id = form_data.limit_coupon_id;
      data.coupon = [];

      if (!!form_data.coupon && isArray(form_data.coupon)) {
        form_data.coupon.map((item, index) => {
          data.coupon[index] = {
            // type: item.type,
            limit_time: item.limit_time,
            coupon_id: [],
          };
          if (!!item.coupon_id && isArray(item.coupon_id)) {
            item.coupon_id.map((v, k) => {
              data.coupon[index]["coupon_id"][k] = v.coupon_id;
            });
          }
          // if(data.coupon[index]["coupon_id"].length == 0){
          //   console.log('------------------',data.coupon);
          //   data.coupon.splice(index, 1);
          // }
        });
      }

      console.log("datadatadatadatadatadata", data);
      //请求保存
      limitCoupon({...data}).then(res => {
          if(res.data.code == 1){
              this.$message.success('保存成功！');
          }
      })
    },

    limit_timebtn() {
      // this.data.coupon.limit_time= []
      console.log("ssssssssssssss",this.data)
      this.data.coupon.push({limit_time: this.data.limit_time,coupon_id: []});
    },

    delbtn(index) {
      this.data.coupon.splice(index, 1);
      // this.data.limit_time = ''
    },

    filtersCouponChange(arg) {
      const { displayData } = arg;
      console.log(displayData, "display");
      
      displayData.forEach((item) => {
        const index = this.index;
        var hasIndex = this.data.coupon[index].coupon_id.findIndex(
          (tableitem) => {
            return `${tableitem.coupon_id}` === `${item.coupon_id}`;
          }
        );
        if (hasIndex === -1 && this.data.coupon[index].coupon_id.length < 5) {
             this.data.coupon[index].coupon_id.push({ coupon_id: item.coupon_id, name: item.name,
              coupon_type: item.coupon_type, rule: item.rule, coupon_price: item.coupon_price, rule_min_money: item.rule_min_money,
               min: item.min, max: item.max, discount: item.discount, reduce_price: item.reduce_price })
        //   this.data.coupon[index].coupon_id.push(item.coupon_id)
        //   this.data.coupon[index].coupon_id.push({
        //     coupon_id: item.coupon_id,
        //   });
        }
      });
    },
    couponToogle(index) {
      // console.log("ddddddddddddddd",index)
      // this.data.coupon= this.coupon.coupon_id
      this.index = index;
      this.$refs.chooseCoupon.toggle();
    },
    // toggleSelection(scope) {
    //     console.log("4444444444444",scope)
    // this.data.coupon.splice(scope.$index,1)
    // }
    delItemList(index,$scope) {
      console.log(
        "5555555555555",
        this.data.coupon[index].coupon_id.length < 0
      );
      console.log("indexxxxxxxxxxxxxxxxxxxxxxxxxxx",index,$scope)
      this.data.coupon[index].coupon_id.splice($scope, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>